<template>

  <!--这是由顶部通栏，头部，底部，中间内容要变化的，布局容器 -->
  <!-- <nav>顶部通栏</nav> -->
  <AppTopnav />
  <AppHeader />
  <AppHeaderSticky />
  <main class="app-body">
    <!-- 二级路由 -->
    <router-view></router-view>
  </main>
  <AppFooter />
</template>

<script>
import AppTopnav from '@/components/app-topnav'
import AppHeader from "@/components/app-header.vue";
import AppFooter from "@/components/app-footer.vue";
import AppHeaderSticky from "@/components/app-header-sticky.vue";
import { onMounted } from "vue";
import { useStore } from "vuex";
export default {
  name: "XtxLayout",
  components: { AppTopnav, AppHeader, AppFooter, AppHeaderSticky },
  setup () {
    const store = useStore();
    onMounted(() => {
      // 调用分类的actions，一次就好（app-header-nav会复用，多次调用）
      store.dispatch("category/getList");
    });
  },
}
</script>

<style>
</style>